<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">	


</script>
<style>
	#dhl{
		width:1538px;
	}
	#d1{
		border:1px solid;
		height:110px;
		width:680px;
		margin-left:216px;
	 	overflow: hidden;
	}
	#d2{
		float:left;
		height:110px;
		width:84%;
		
	}
	#d3{
		float:right;
		height:40px;
		width:14%;
		margin-top:-11%;
		margin-left:7%;
	}
	#d4{
		border:1px solid;
		width:680px;
		margin-left:216px;
	}
	#d5{
		border:1px solid;
		height:420px;
		width:680px;
		margin-left:216px;
		overflow: hidden;
	}
	#d6{
		border:1px solid;
		height:60px;
		width:100%;
	}
	#d7{
		float:left;
		height:50px;
		width:18%;
		margin-left:5px;
		margin-top:5px;
	}
	#d8{
		float:right;
		height:60px;
		width:79%;
	}
	#d9{
		width:99%;
		height:47%;
		padding-top:3px;
	}
	#d10{
		width:99%;
		height:41%;
		padding-top:3px;
	}
	#d11{
		border:1px solid;
		height:39px;
		width:100%;
	}
	#d12{
		border:1px solid;
		height:120px;
		width:100%;
	}
	#d13{
		border:1px solid;
		height:30px;
		width:100%;
	}
	#d14{
		float:left;
		border:1px solid;
		height:30px;
		width:49%;
	}
	#d15{
		float:right;
		border:1px solid;
		height:30px;
		width:49%;
	}
	#d16{
		border:1px solid;
		height:28px;
		width:100%;
	}
	#d17{
		border:1px solid;
		height:39px;
		width:100%;
	}
	#d18{
	 	float:left;
		border:1px solid;
		height:39px;
		width:80%;
	}
	#d19{
		float:right;
		border:1px solid;
		height:39px;
		width:19%;
	}
	#d20{
		border:1px solid;
		height:39px;
		width:100%;
	}
	#d21{
		border:1px solid;
		height:46px;
		width:100%;
		
	}
	#d22{
		float:left;
		margin-top:2px;
		margin-left:-16.5%;
		width:103%;
	}
	#d23{
		float:right;
		height:40px;
		margin-top:-8%;
		margin-left:7%;
	}
</style>
</head>
<body>
<div>
	<ul class="layui-nav" lay-filter="" id="dhl">
		<li class="layui-nav-item"><a href="">首页</a></li>
		<li class="layui-nav-item"><a href="">空间</a></li>
		<li class="layui-nav-item"><a href="">音乐</a></li>
		<li class="layui-nav-item"><a href="">电影</a></li>
		<li class="layui-nav-item"><a href="">摄影</a></li>
	</ul>
</div>

<div id="d1" >
	<div id="d2"> <textarea name="desc" placeholder="请输入说说内容" class="layui-textarea"></textarea></div>
	<div id="d3"><button class="layui-btn layui-btn-big">发表</button></div>
</div>
<div id="d4">
<ul class="layui-nav" lay-filter=""><li class="layui-nav-item">
    <a href="javascript:;">全部动态</a>
    <dl class="layui-nav-child"> <!-- 二级菜单 -->
      <dd><a href="">全部动态</a></dd>
      <dd><a href="">日志</a></dd>
      <dd><a href="">相册</a></dd>
    </dl>
  </li>
  </ul>
</div>
  
<c:forEach items="${zone}" var="cc">
<div id="d5">
	<div id="d6">
			<div id="d7"><img src="image/1.jpg" height="50px" width="65px"></div>
			<div id="d8">
				<div id="d9">${cc.uNick}</div>
				<div id="d10">${cc.addTime}</div>
			</div>
		</div>
		<div id="d11">${ss.sWord}</div>
		<div id="d12">图片等</div>
		<div id="d13">
			<div id="d14">${ss.cTimes}</div>
			<div id="d15"><img src="image/3.png" height="28px" width="32px"></div>
		</div>
		<div id="d16"><img src="image/2.png" height="28px" width="32px">
			<c:forEach items="${cc.upList}" var="up">
				<a href="">${up.nick}</a>
			</c:forEach>
		</div>
		<div id="d17">
			<div id="d18">18</div>
			<div id="d19">19</div>
		</div>
		<div id="d20">20</div>
		<div id="d21">
			<div id="d22">
		       <div class="layui-form-item">
				    <div class="layui-input-block">
				      <input type="text" name="title" required  lay-verify="required" placeholder="评论" autocomplete="off" class="layui-input">
				    </div>
		  		</div>
		  	</div>
		  	<div id="d23"><button class="layui-btn layui-btn-big">发表</button></div>
		</div>	
</div>
</c:forEach>
</body>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element();
  
  //…
});

</script>
</html>